<template>
    <div class="ui-scroll-page">
        <el-card class="ui-info-board" shadow="hover" v-if="ready">
            <template #header>
                <div class="flex-row">
                    <span class="title">商户资料</span>
                    <el-button type="default" size="small" @click="onReviseBaseInfo()">编辑</el-button>
                </div>
            </template>
            <el-row>
                <el-col :xs="24" :sm="12" :lg="8"><span>网吧名称:</span><span>{{ base?.merchant_name }}</span></el-col>
                <el-col :xs="24" :sm="12" :lg="8"><span>所在地址:</span><span>{{ base?.m_address }}</span></el-col>
                <el-col :xs="24" :sm="12" :lg="8"><span>联系电话:</span><span>{{ base?.tel }}</span></el-col>
                <el-col :xs="24" :sm="12" :lg="8"><span>创建时间:</span><span v-datetime="base?.createtime "></span></el-col>
                <el-col :xs="24" :sm="12" :lg="8"><span>法人姓名:</span><span>{{ license?.license_name }}</span></el-col>
                <el-col :xs="24" :sm="12" :lg="8"><span>法人证件:</span><span>{{ license?.sLegalIDNO }}</span></el-col>
                <el-col :xs="24" :sm="12" :lg="8"><span>法人电话:</span><span>{{ license?.tel }}</span></el-col>
                <el-col :xs="24" :sm="12" :lg="8"><span>场所代码:</span><span>{{ license?.license_number }}</span></el-col>
                <el-col :xs="24" :sm="12" :lg="8">
                    <span>提现密码:</span>
                    <span v-if="!merchant.cashout_password">
                        <el-button size="small" type="primary" @click="onSetPassword()">设置</el-button>
                    </span>
                    <span v-else class="text-success">已设置</span>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="8">
                    <span>营业执照:</span>
                    <span v-if="license.stage == 3 || license.stage == 4" class="text-failure">{{license.reason}}</span>
                    <span v-else-if="license.stage == 1" class="text-failure">请等待审核</span>
                    <span v-else class="text-success">已认证</span>
                    
                    <span v-if="(license.stage != 2 && license.stage != 1)">
                        <el-button type="primary" size="small" @click="onUploadLicensePhoto">上传</el-button>
                    </span>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="8">
                    <span>提现账户:</span>
                    <span v-if="bank.stage == 2" class="text-success">{{ bank?.bank_card }}</span>
                    <span v-else-if="bank.stage == 3 || bank.stage == 4" class="text-failure">{{bank?.reason}}</span>
                    <span v-else-if="license.stage == 2"></span>
                    <span v-else-if="license.stage == 4" class="text-failure">请重新上传营业执照信息</span>
                    <span v-else-if="license.stage == 1" class="text-failure">已上传营业执照，等待审核</span>
                    <span v-else-if="bank.stage == 1" class="text-failure">请等待审核</span>
                    <span v-else class="text-failure">请先上传营业执照</span>

                    <span v-if="(bank.stage == 2 && license.stage == 2)">
                        <el-button size="small" type="success" @click="onWithdrawal">提现</el-button>
                    </span>
                    <span v-else-if="(bank.stage != 2 && license.stage == 2)">
                        <el-button type="primary" size="small" @click="onBankCard($event)">上传</el-button>
                    </span>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="24"><span>商家介绍:</span><span>{{ base?.desc }}</span></el-col>
            </el-row>
        </el-card>
        <el-card class="ui-info-board" shadow="hover" v-if="ready">
            <template #header>
                <span>商户设置</span>
            </template>
            <el-row>
                <el-col :xs="24" :sm="12" :lg="8">
                    <span>商品设置:</span>
                    <span style="color:#AAA">会员卡余额购买商品扣款方式等.</span>
                    <span><el-button size="small" type="primary" @click="onGoodsSaleSetting">设置</el-button></span>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="8">
                    <span>退货时间:</span>
                    <span style="color:#AAA">允许退货的时间（小时）.</span>
                    <span><el-button size="small" type="primary" @click="onGoodsSaleSetting">设置</el-button></span>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>
<script>
import { toRefs, reactive } from "vue";
import directives from "../../uiframe/services/directives";
import { UiShowDialog } from '../../uiframe/layout/components/CompFactory.vue';
import GoodsSaleSettingDialog from './dialog/GoodsSaleSettingDialog.vue'
import ReviseBaseInfoDialog from './dialog/ReviseBaseInfoDialog.vue'
import LicensePhotoDialog from './dialog/LicensePhotoDialog.vue'
import BankCardDialog from './dialog/BankCardDialog.vue'
import WithdrawalDialog from './dialog/WithdrawalDialog.vue'
import SetPasswordDialog from './dialog/SetPasswordDialog.vue'
import axios from "axios";

export default {
    directives,
    setup() {
        let data = reactive({
            base:{},
            license:{},
            bank:{},
            audit:{},
            merchant:{},
            ready:false
        });

        const loadData = ()=>{
            axios.post('/netbar/read').then(({data:res})=>{
                data.base = res.base ?? {};
                data.license = res.license ?? {};
                data.bank = res.bank ?? {};
                data.ready = true;
                data.merchant = res.merchant ?? {}
            }).catch(res=>{
                
            })
        },
        methods  = {
            onReviseBaseInfo:()=>{
                UiShowDialog(ReviseBaseInfoDialog, {}).then(res=>{
          
                }).catch(()=>{})
            },
            onGoodsSaleSetting:() => {
                UiShowDialog(GoodsSaleSettingDialog, {}).then(res=>{
          
                }).catch(()=>{})
            },
            onUploadLicensePhoto:()=>{
                UiShowDialog(LicensePhotoDialog,{payload:data.license}).then(res=>{
                    data.license = res.data;
                }).catch(()=>{})
            },
            onBankCard:()=>{
                UiShowDialog(BankCardDialog,{payload:data.bank}).then(res=>{
                    data.bank = res.data;
                }).catch(()=>{})
            },
            onWithdrawal:()=>{
                UiShowDialog(WithdrawalDialog,{amount_online:data.merchant.amount_online}).then(res=>{
                    data.merchant.amount_online -= res.data.amount;
                }).catch(()=>{})
            },
            onSetPassword:()=>{
                UiShowDialog(SetPasswordDialog,{}).then(res=>{
                    data.merchant.cashout_password = true;
                }).catch(()=>{})
            }
        }

        loadData();
        return {
            ...toRefs(data),
            ...methods
        };
    }
};
</script>
<style lang="scss">
.text-success{
    color:#409EFF
}
.text-failure{
    color:#F56C6C
}
</style>
